<template>
    <!--pages/address/address.wxml-->
    <div>
        <div class='address-wrap column'>
            <div v-if="addressList.length !== 0">
                <div class='address column' v-for='(item,index) in addressList' :key="index">
                    <div class='address-up column' @click='choose(index)'>
                        <div>收货人: {{item.name}}     <span class='phone'>{{item.mobile}} </span> </div>
                        <div class='detail'>{{item.province}} {{item.city}} {{item.area}} {{item.address}} </div>
                    </div>
                    <div class='address-down flex'>
                        <div class='left'>
                            {{item.status == 1? '默认地址':''}}
                        </div>
                        <div class='right flex'>
                            <div class='edit flex' @click='edit(index)'>
                                <img src="../assets/edit.png">
                                编辑
                            </div>
                            <div class='edit flex' @click="deleteTap(index,item.id)">
                                <img src="../assets/del.png">
                                删除
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='no-data flex' v-else>
                <img src='../assets/no-data.png'></img>
                <p>暂无收货地址</p>
            </div>
            <div class='sub shadow flex' @click='goDetail'>新增收货地址</div>
        </div>
       
         <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
    </div>
</template>

<script>
import { myReceiptAddress } from "./../api/index";
import { MessageBox } from "mint-ui";
export default{
    data(){
        return{
            flag: true,
            page:0,
            pagesize:10,
            addressList:[],
            type:0,
            showLoading:false,
            timeOut:1500
        }
     },
    mounted(){
        this.getMyAddress()
    },
    methods:{
        //获取我的所有地址
        getMyAddress(){
            let mstr = sessionStorage.getItem('mstr')
            let options = {
                mstr,
                type:'seeAll'
            }
            myReceiptAddress(options).then(res=>{
                if(res.data.status === 1){
                    this.addressList = res.data.data
                }else{
                    this.addressList = []
                }
            })
        },
        //编辑地址
        edit(index){
            this.$router.push({
                name:'addAddress',
                params:{
                    address:this.addressList[index]
                }
            })
        },  
        //删除地址
        deleteTap(index,id){
            MessageBox.confirm('确定删除该条地址吗?').then(action =>{
                 let mstr = sessionStorage.getItem('mstr')
                 let options = {
                     mstr,
                     type:'del',
                     addid:id
                 }
                 if(this.flag){
                     this.flag = false
                     myReceiptAddress(options).then(res=>{
                        if(res.data.status === 1){
                            this.addressList.splice(index,1)
                            Toast({
                                message:'删除成功',
                                position:'center',
                                duration:2000
                            })
                        }else{
                            Toast({
                                message:res.data.info,
                                position:'center',
                                duration:2000
                            })
                        }
                        setTimeout(()=>{
                            this.flag = true
                        },this.timeOut)
                    })
                }  
            })
        },
        //新增地址
        goDetail(){
            this.$router.push({
                name:'addAddress'
            })
        },
        //选择该地址
        choose(index){
            if(this.flag){
                this.flag=false
                let address = this.addressList[index]
                sessionStorage.setItem('addressData',JSON.stringify(address))
                this.$router.back(-1)
                setTimeout(()=>{
                    this.flag = true
                },this.timeOut)
            }
            
        }
    }
 }
</script>


<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/address/address.wxss */
.address-wrap{
    padding-bottom: torem(85px);
}
.address{
    border-bottom: 1px solid #e7e7e7;
    background: #fff;
}
.address-up{
    font-size: torem(28px);
    padding: torem(20px) torem(30px);
    color: #333;
    line-height: torem(50px);
    border-bottom: 1px solid #e7e7e7;
}
.phone{
    margin-left: torem(40px);
}
.address-up .detail{
    font-size: torem(26px);
    color: #333;
}
.left{
   color: #ff9933;
}
.right .edit{
    align-items: center;
    margin-left: torem(30px);
}
.right img{
    width: torem(32px);
    height: torem(32px);
    margin-right: torem(10px);
}
.address-down{
    font-size: torem(26px);
    color: #4d4d4d;
    justify-content: space-between;
    padding: torem(20px) torem(30px);
}
.address-down>div{
    align-items: center;
}
.sub{
    width: 100%;
    height: torem(85px);
    align-items: center;
    justify-content: center;
    background: #D55940;
    color: #fff;
    font-size: torem(28px);
    position: fixed;
    bottom: 0;
    left:0;
    box-shadow: torem(-2px) torem(6px) torem(9px) 0 rgba(228, 107, 9, 0.75);
}
</style>